<template>
  <div class="config-page">
    <t-form
      ref="form"
      :data="formData"
      :label-width="80"
      colon
      @reset="onResets"
      @submit="onSubmit"
      :style="{ marginBottom: '8px' }"
    >
      <t-row>
        <t-col :span="10">
          <t-row :gutter="[16, 24]">
            <t-col>
              <t-form-item label="平台关键词" name="keyword" required>
                <t-select
                  v-model="formData.task_id"
                  class="form-item-content"
                  :options="zhihuTask"
                  placeholder="请选择平台关键词"
                />
              </t-form-item>
            </t-col>
          </t-row>
        </t-col>

        <t-col :span="2" class="operation-container">
          <t-button theme="primary" type="submit" :style="{ marginLeft: '8px' }"> 查询 </t-button>
          <t-button type="reset" variant="base" theme="default"> 导出 </t-button>
        </t-col>
      </t-row>
    </t-form>
    <!-- 卡片列表 -->
    <template v-if="pagination.total > 0 && !dataLoading">
      <div class="list-card-items">
        <t-row :gutter="[16, 16]">
          <t-col
            :lg="4"
            :xs="6"
            :xl="3"
            v-for="article in articles.slice(
              pagination.pageSize * (pagination.current - 1),
              pagination.pageSize * pagination.current,
            )"
            :key="article.content_id"
          >
            <article-card :article="article" @showDetails="handleShowDetails" />
          </t-col>
        </t-row>
      </div>
      <div class="list-card-pagination">
        <t-pagination
          v-model="pagination.current"
          :total="pagination.total"
          :pageSizeOptions="[12, 24, 36]"
          :page-size.sync="pagination.pageSize"
          @page-size-change="handlePageChange"
          @current-change="onCurrentChange"
        />
      </div>
    </template>
    <div v-else-if="dataLoading" class="list-card-loading">
      <template>
        <t-loading text="加载中..." size="small"></t-loading>
      </template>
    </div>
    <!-- 文章详情弹窗 -->
    <t-dialog :visible.sync="isModalVisible" title="文章详情" width="1200px" :destroy-on-close="true">
      <article-details v-if="selectedArticle" :article="selectedArticle" />
      <template #footer>
        <t-button theme="primary" @click="isModalVisible = false">关闭</t-button>
      </template>
    </t-dialog>
  </div>
</template>

<script>
import ArticleCard from './components/ArticleCard.vue';
import ArticleDetails from './components/ArticleDetails.vue';

export default {
  components: {
    ArticleCard,
    ArticleDetails,
  },
  data() {
    return {
      formData: {
        task_id: '',
      },
      zhihuTask: [],
      pagination: { current: 1, pageSize: 12, total: 0 },
      articles: [],
      dataLoading: false,
      isModalVisible: false,
      selectedArticle: null,
      platform_name: 'zhihu',
    };
  },
  mounted() {
    this.fetchZhihuTask();
  },
  methods: {
    async fetchZhihuTask() {
      try {
        const response = await this.$request.get('/system/task-list/', { params: { platform_name: this.platform_name } });
        if (response.status === 200) {
          this.zhihuTask = response.data.map(task => ({
            label: task.keyword,
            value: task.task_id,
          }));
        } else {
          this.$message.warning('获取数据失败');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        this.$message.error('获取数据失败');
      }
    },
    async fetchArticles(page) {
      this.dataLoading = true;
      try {
        const response = await this.$request.get(`/zhihu/zhihu-task-data/${this.formData.task_id}/`, {
          params: { page },
        });
        if (response.status === 200) {
          this.articles = response.data.results;
          this.pagination.total = response.data.total;
          this.pagination.current = response.data.current_page;
        } else {
          this.$message.warning('获取数据失败');
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        this.$message.error('获取数据失败');
      } finally {
        this.dataLoading = false;
      }
    },
    onSubmit() {
      this.fetchArticles(this.pagination.current);
    },
    handlePageChange(page) {
      this.fetchArticles(page);
    },
    handleShowDetails(article) {
      this.selectedArticle = article;
      this.isModalVisible = true;
    },
    onCurrentChange(current) {
      this.pagination.current = current
      this.fetchArticles(current);
    },
    onResets() {
      this.formData = {};
    },
  },
};
</script>

<style scoped>
.config-page {
  padding: 24px;
}

.pagination {
  margin-top: 24px;
  text-align: center;
}
</style>
